<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>添加商品</title>

  <link rel="stylesheet" href="http://at.alicdn.com/t/font_608853_ykjxktkf2agojemi.css">

  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
  <link rel="stylesheet" href="/static/jquery-weui/css/demos.css">
  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
  <script src="/static/js/vue.js"></script>
  <script src="/static/js/store.js"></script>
  <style>
    .headTitle {
      position: fixed;
      border: 1px solid #f4f4f4;
      border-top: none;
      border-left: none;
      border-right: none;
      background: #fff;
      width: 100%;
      height: 44px;
      line-height: 44px;
    }
    .head {
      position: absolute;
      width: 100%;
      max-width: 640px;
      right: 0;
      margin: 0 auto;
      height:44px;
      background: rgb(255, 255, 255);
      top: 0;
      left: 0;
      z-index: 3;
    }
    .head .title1 {
      text-align: center;
      font-size: 17px;
      margin: 0 8%;
      font-style: normal;
      font-weight: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 100%;


    }
    .head a img {
      float: left;
      display: block;
      width: 100%;
      width: 10px;
      height: 16px;
      margin-left: 5%;
      margin-top: 14px;
    }
    .weui-cells{
      font-size: 15px;
    }
  </style>
</head>
<body style="background-color: rgb(239,239,244)">
<header class="head headTitle" style="text-align: center">
  <a class="back" href="{:url('/home/goods/add')}"><img src="/static/images/back_gray.png" alt="返回"></a>
  <span style="margin-right: 8%">添加商品</span>
</header>
<div id="app" style="margin-top: 50px;">
  <form method="post" action=" " id="box" enctype="multipart/form-data">
    <div class="weui-cells weui-cells_form" style="background-color: rgb(239,239,244)">

      <!--选择品牌-->
      <div id="full" class='weui-popup__container'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
          <div class="">
            <div v-for="(item,index) in items"  class="weui-cell weui-check__label" >
              <div class="weui-cell__bd">
                <p>{{item.pinpai}}</p>
              </div>
              <div class="weui-cell__hd">
                <a href="javascript:;" :data_index="index"  onclick="sure(this)" class="weui-btn weui-btn_primary close-popup" style="font-size: 15px">确定</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-cell" style="background-color: #fff">
        <div class="weui-cell__hd"><label class="weui-label">品牌：</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="pp" type="text"  name="pinpai" value="" style="width: 40%;height: 35px;display: none" readonly="readonly" required="required">
            <a href="javascript:;" style="font-size: 14px;float: right" class="weui-btn weui-btn_primary open-popup" data-target="#full">选择品牌</a>
        </div>

      </div>
      <!--选择品牌结束-->
      <!--图片上传-->
      <div class="weui-cell" style="margin-top: 8px;background-color: #fff;">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">图片上传</p>
              <div class="weui-uploader__info">0/1</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li v-if=" pictures.url==''" class="weui-uploader__file" style="display: none">
                  <img :src="pictures.url" style="width: 100%;height: 100%">
                </li>
                <li v-else class="weui-uploader__file">
                  <img :src="pictures.url" style="width: 100%;height: 100%">
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="button">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--简介-->
      <div class="weui-cells__title"  style="margin-top: 8px;background-color: #fff;color: black;height: 40px;font-size: 15px;line-height: 40px">简介:</div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <textarea class="weui-textarea" id="txt" placeholder="请输入文本" rows="3"></textarea>
            <div class="weui-textarea-counter"><span>0</span>/200</div>
          </div>
        </div>
      </div>
      <!--提交-->
      <div class="weui-btn-area">
        <div class="weui-btn weui-btn_primary" onclick="contnt()">确定</div>
      </div>
    </div>

  </form>
</div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var obj={
        pinpai:"",
        thumb:"",
        remarks:"",
    }
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            pictures: {
                    url: '',
                    src: ''
                }

        },
    });
    $(function(){
        store.get('shu');
        var put=store.get('shunext');
        if(put){
            $("input[name='pinpai']").val(put.pinpai);
            $('#pp').show();
            $("#txt").val(put.remarks);
        }
        $.post('/home/goods/add_next',
            function (res) {
                app.items = res.data;
            }
        );
    })
//弹框
  $(document).on("open", ".weui-popup-modal", function() {
        console.log("open popup");
    }).on("close", ".weui-popup-modal", function() {
        console.log("close popup");
    });
    // 获取数据
    function sure(that) {
        var data_index = $(that).attr('data_index');
        var item=data_index;
        var pp=app.items[item];
        console.log(pp.pinpai);
        $('#pp').val(pp.pinpai);
        $('#pp').show();
    }
    // 本地存储
    function contnt(){
        obj.pinpai=$("input[name='pinpai']").val();
        obj.remarks=$("#txt").val();
        store.set('shunext', obj);
        console.log( store.set('shunext', obj));
//提交数据
        var thumb=app.pictures.src;
        console.log(thumb+"123");
         var present=store.get('shu');
         var refer=store.get('shunext');

         $.post('/home/goods/addsj',{ name:present.name,fenlei:present.fenlei,xinghao:present.xinghao,caizhi:present.caizhi,
             discount:present.discount,weizhi:present.weizhi,pinpai:refer.pinpai,remarks:refer.remarks,thumb:thumb},
             function (res) {
             if (res.code == 1){
                 store.set('shunext',false);
                 store.set('shu',false);
                 var s="{:url('/home/goods/management')}";
                 location.href=s;
                 }
         })
    }
    // 图片接口
    wx.config({
        debug: false,
        appId: '{$jsconfig.appId}',
        timestamp: '{$jsconfig.timestamp}',
        nonceStr: '{$jsconfig.noncestr}',
        signature: '{$jsconfig.signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
    wx.isInit = false;

    wx.ready(function () {


        wx.checkJsApi({
            jsApiList: [
                'getNetworkType',
                'previewImage'
            ],
            success: function (res) {
                alert(JSON.stringify(res));
            }
        });


        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };

        $('#chooseImage').click(function () {

            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    alert('已选择 ' + res.localIds.length + ' 张图片');
                }
            });

        });
        $('#uploaderInput').click(function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    console.log('已选择 ' + res.localIds.length + ' 张图片');
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                i++;
                                console.log('已上传：' + i + '/' + length);
                                //单个上传完成时
//                                record.send_img(res.serverId);

                                $.get('/index/api/tempfile', {mid: res.serverId}, function (res) {
                                    console.log(res);
                                    if(res.code==1){
                                        app.pictures.src=res.data.src;
                                        app.pictures.url=res.data.url;
                                    }
                                });

                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时


                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }

                    upload();

                }
            });
        });






    });

    wx.error(function (res) {
        alert(res.errMsg);
    });


</script>
</html>